<template>
  <!-- 卡片部分 -->
  <div class="top-cards">
    <!-- layout布局插件 -->
    <el-row :gutter="20">
      <!-- 在校人数 -->
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <!-- card 插件-->
          <el-card class="box-card" :body-style="{ padding: '12px' }">
            <div class="card-header">
              <div class="card-title">
                <el-icon :size="40" class="green"><UserFilled /></el-icon>
                <div class="cards-text">
                  <div class="title">&nbsp;我的在读学生（人）</div>
                  <div class="words">&nbsp;截止今日前</div>
                </div>
              </div>
              <el-button class="button" text>
                <el-icon :size="24" color="#8f8f8f"><MoreFilled /></el-icon>
              </el-button>
            </div>
            <!-- 内容 -->
            <div class="card-content text">
              <div class="item">
                <div class="num">51</div>
                <div id="pie1"></div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <!-- 分校区学生 -->
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <!-- card 插件-->
          <el-card class="box-card" :body-style="{ padding: '12px' }">
            <div class="card-header">
              <div class="card-title">
                <el-icon :size="40" class="green"><HomeFilled /></el-icon>
                <div class="cards-text">
                  <div class="title">&nbsp;本分校学生（人）</div>
                  <div class="words">&nbsp;截止今日前</div>
                </div>
              </div>
              <el-button class="button" text>
                <el-icon :size="24" color="#8f8f8f"><MoreFilled /></el-icon>
              </el-button>
            </div>
            <!-- 内容 -->
            <div class="card-content text">
              <div class="item">
                <div class="num">324</div>
                <div id="pie2"></div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <!-- 新增学生 -->
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <!-- card 插件-->
          <el-card class="box-card" :body-style="{ padding: '12px' }">
            <div class="card-header">
              <div class="card-title">
                <el-icon :size="40" class="green"><CirclePlusFilled /></el-icon>
                <div class="cards-text">
                  <div class="title">&nbsp;我的新增学生（人）</div>
                  <div class="words">&nbsp;本月新增人数</div>
                </div>
              </div>
              <el-button class="button" text>
                <el-icon :size="24" color="#8f8f8f"><MoreFilled /></el-icon>
              </el-button>
            </div>
            <div class="card-content text">
              <div class="item">
                <div class="num">3</div>
                <div id="colum"></div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <!-- 学期课时进度 -->
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <!-- card 插件-->
          <el-card class="box-card" :body-style="{ padding: '12px' }">
            <div class="card-header">
              <div class="card-title">
                <el-icon :size="40" class="green"><List /></el-icon>
                <div class="cards-text">
                  <div class="title">&nbsp;学期课时进度</div>
                  <div class="words">&nbsp;截止今日前</div>
                </div>
              </div>
              <el-button class="button" text>
                <el-icon :size="24" color="#8f8f8f"><MoreFilled /></el-icon>
              </el-button>
            </div>
            <div class="card-content text">
              <div class="item">
                <div class="num">70%</div>
                <div id="progress">
                  <el-progress
                    :show-text="false"
                    :stroke-width="40"
                    :percentage="70"
                  />
                  <div class="progress-title">
                    <div class="left-title">
                      <span class="left-circle"></span
                      ><span>&nbsp;当前进度</span>
                    </div>
                    <div class="right-title">
                      <span class="right-circle"></span
                      ><span>&nbsp;剩余进度</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
  <!-- 按钮部分 -->
  <div class="bars">
    <el-button color="#1d8f8b" plain>添加学员</el-button>
    <el-button color="#1d8f8b" plain>修改信息</el-button>
    <el-button color="#1d8f8b" plain>删除课程</el-button>
    <el-button color="#1d8f8b" plain @click="download">导出</el-button>
  </div>
  <!-- 搜索部分 -->
  <div class="search">
    <el-row :gutter="0">
      <!-- 搜索信息 -->
      <el-col :span="5">
        <div class="grid-content ep-bg-purple">
          <div class="top-search">
            <input
              v-model="input"
              class="top-input"
              placeholder="可搜索: 学生姓名等信息"
              @keyup.enter.native="search"
            />
            <span class="input-icon" @click="search">
              <el-icon :size="16" color="#aab2bd"><Search /></el-icon>
            </span>
          </div>
        </div>
      </el-col>
      <!-- 学生来源 -->
      <el-col :span="6">
        <div class="grid-content2 ep-bg-purple">
          <span class="words">学生来源：</span>
          <el-select
            v-model="value1"
            filterable
            placeholder="请选择学生来源"
            class="m-2"
            size="large"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in option1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
      <!-- 主教老师 -->
      <el-col :span="6">
        <div class="grid-content2 ep-bg-purple">
          <span class="words">学生来源：</span>
          <el-select
            v-model="value2"
            filterable
            placeholder="请选择主教老师"
            class="m-2"
            size="large"
          >
            <el-option
              v-for="item in option2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
      <!-- 学生年龄 -->
      <el-col :span="6">
        <div class="grid-content2 ep-bg-purple">
          <span class="words">学生年龄：</span>
          <el-select
            v-model="value3"
            filterable
            placeholder="请选择学生年龄"
            class="m-2"
            size="large"
          >
            <el-option
              v-for="item in option3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
      <!-- 展开 -->
      <el-col :span="1">
        <div class="grid-content2 ep-bg-purple">
          <div class="open">
            <span class="words">展开</span>
            <el-icon><ArrowRightBold /></el-icon>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <!-- 学生信息表 -->
  <div class="stuTabs">
    <!-- 学生信息表 -->
    <el-table
      :data="stuData"
      ref="multipleTableRef"
      :default-sort="{ prop: 'age', order: 'descending' }"
      style="width: 100%"
      class="tables"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column property="name" label="姓名" width="100" align="center">
      </el-table-column>
      <el-table-column property="sexy" label="性别" width="80" align="center" />
      <el-table-column property="age" label="年龄" width="80" align="center" />
      <el-table-column
        property="money"
        label="缴费金额"
        width="120"
        align="center"
      />
      <el-table-column
        property="classTime"
        label="入学日期"
        width="180"
        align="center"
      />
      <el-table-column
        property="tel"
        label="联系方式"
        width="160"
        align="center"
      />
      <el-table-column
        property="course"
        label="报名课程"
        width="120"
        align="center"
      />
      <el-table-column
        property="teacher"
        label="任课老师"
        width="100"
        align="center"
      />
      <el-table-column label="操作" show-overflow-tooltip align="center">
        <template #default="scope">
          <el-button>修改</el-button>
          <el-popconfirm
            title="你确定要删除了?"
            @confirm="confirm(scope.row.id)"
            @cancel="cancel"
          >
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>
          <el-button>详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <div class="table-footer">
      <div class="words">共{{ total }}条数据</div>
      <el-pagination
        small
        background
        :page-size="10"
        layout="prev,pager,next"
        class="mt-4"
        hide-on-single-page
        :total="total"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  UserFilled,
  MoreFilled,
  HomeFilled,
  CirclePlusFilled,
} from "@element-plus/icons-vue";
import * as echarts from "echarts";
import { ElRow, ElCol, ElCard, ElIcon, ElButton } from "element-plus";
import { ref, onBeforeUnmount, onMounted } from "vue";
import "@/mock/stus";
import axios from "axios";
import ExportJsonExcel from "js-export-excel";

let myChart1: any;
let myChart2: any;
let myChart3: any;
const init1 = () => {
  // 基于准备好的dom，初始化echarts实例
  const pie1 = document.getElementById("pie1");
  // 如果元素存在
  if (pie1) {
    myChart1 = echarts.init(pie1);
    // 绘制图表
    myChart1.setOption({
      width: 120,
      height: 120,
      //
      color: ["#ffa031", "#33e0da", "#ffa031"],
      tooltip: {
        trigger: "item",
      },
      legend: {
        right: "0%",
        bottom: "10%",
        orient: "re-vertical",
        // x:'right',
        // y:'center',
        data: ["男生", "女生"],
        // left: "center",
      },

      series: [
        {
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            // position: "center",
          },
          emphasis: {
            label: {
              // show: true,
              fontSize: 20,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 650, name: "女生" },
            { value: 350, name: "男生" },
          ],
        },
      ],
    });
  }
};

const init2 = () => {
  // 基于准备好的dom，初始化echarts实例
  const pie2 = document.getElementById("pie2");
  // 如果元素存在
  if (pie2) {
    myChart2 = echarts.init(pie2);
    // 绘制图表
    myChart2.setOption({
      width: 120,
      height: 120,
      color: ["#33e0da", "#ffa031", "#33e0da"],
      tooltip: {
        trigger: "item",
      },
      legend: {
        right: "0%",
        bottom: "10%",
        orient: "re-vertical",
        // x:'right',
        // y:'center',
        // data: ["男生", "女生"],
        // left: "center",
      },

      series: [
        {
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            // position: "center",
          },
          emphasis: {
            label: {
              // show: true,
              fontSize: 20,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 200, name: "本分校区" },
            { value: 6000, name: "全国校区" },
          ],
        },
      ],
    });
  }
};

const init3 = () => {
  // 基于准备好的dom，初始化echarts实例
  const colum = document.getElementById("colum");
  // 如果元素存在
  if (colum) {
    myChart3 = echarts.init(colum);
    // 绘制图表
    myChart3.setOption({
      width: 180,
      height: 100,
      color: ["#33e0da", "#ffa031", "#33e0da"],
      legend: {},
      tooltip: {
        trigger: "item",
      },
      grid: {
        top: 14,
        // left: "3%",
        // bottom: "10%",
        containLabel: true,
      },
      dataset: {
        source: [
          // ["product", "2015", "2016", "2017"],
          ["周一", 108, 83],
          ["周二", 66, 95],
          ["周三", 102, 85],
          ["周四", 122, 83],
          ["周五", 99, 68],
          ["周六", 60, 103],
          ["周日", 52, 73],
        ],
      },
      xAxis: {
        show: false,
        type: "category",
        axisLabel: {
          // 坐标轴刻度标签的相关设置
          show: false,
        },
        axisTick: {
          //刻度相关设置
          show: false, //让刻度隐藏
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        axisLabel: {
          // 坐标轴刻度标签的相关设置
          show: false,
        },
        axisTick: {
          //刻度相关设置
          show: false, //让刻度隐藏
        },
        splitLine: {
          show: false,
        },
      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: "bar" }, { type: "bar" }],
    });
  }
};
onMounted(() => {
  init1();
  init2();
  init3();
  window.onresize = () => {
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
  };
});

onBeforeUnmount(() => {
  myChart1.dispose();
  myChart2.dispose();
  myChart3.dispose();
});

// 下拉框
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");

const option1 = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
];
const option2 = [
  {
    value: "Option21",
    label: "Option21",
  },
  {
    value: "Option22",
    label: "Option22",
  },
  {
    value: "Option23",
    label: "Option23",
  },
];
const option3 = [
  {
    value: "Option31",
    label: "Option31",
  },
  {
    value: "Option32",
    label: "Option32",
  },
  {
    value: "Option33",
    label: "Option33",
  },
];

interface StuType {
  id: number;
  name: string;
  sexy: number;
  age: number;
  money: string;
  classTime: string;
  tel: number;
  course: string;
  teacher: string;
}

const stuData = ref<StuType[]>([]);
const total = ref<number>(0);
const input = ref<string>("");

// 当前第几页
let page = 1;

onMounted(() => {
  getStuData();
});

const getStuData = () => {
  axios
    .post("/api/stus/list", {
      pageSize: 10,
      currentPage: page,
      search: input.value,
    })
    .then((res) => {
      // console.log(res);
      stuData.value = res.data.result;
      total.value = res.data.count;
    });
};

const pageChange = (page1: number) => {
  page = page1;
  getStuData();
};

const search = () => {
  page = 1;
  getStuData();
};

const confirm = (id: number) => {
  console.log("确定删除", id);
  axios
    .post("/api/stus/del", {
      id: id,
    })
    .then((res) => {
      getStuData();
    });
};
const cancel = () => {
  console.log("取消");
};

const clicks = () => {
  console.log(11111);
};

const download = () => {
  axios.post("/api/stus/export").then((res) => {
    const option: any = {};

    option.fileName = "学员管理表单";

    option.datas = [
      {
        sheetData: res.data.result,
        sheetName: "sheet",
        sheetFilter: ["id", "name", "age", "money"],
        sheetHeader: ["序号", "性别", "年龄", "缴费金额"],
        columnWidths: [8, 8, 8, 8],
      },
    ];

    const toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
    console.log(res.data.result);
  });
};
</script>

<style lang="less" scoped>
.green {
  color: #1d8f8b;
}
.top-cards {
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 160px;
  }
  .text {
    font-size: 12px;
    color: #797979;
  }
  .item {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .num {
      padding-top: 22%;
      font-size: 32px;
      color: #000;
      font-weight: 600;
    }
    #pie1 {
      width: 60%;
      min-width: 170px;
      height: 120px;
    }
    #pie2 {
      width: 75%;
      height: 120px;
      min-width: 200px;
    }
    #colum {
      width: 70%;
      min-width: 120px;
      height: 128px;
    }
    #progress {
      padding-top: 20px;
      width: 70%;
      min-width: 120px;
      height: 100px;
      .progress-title {
        margin-top: 20px;
        padding: 0 20px;
        .left-title {
          float: left;
          display: flex;
          align-items: center;
        }
        .right-title {
          float: right;
          display: flex;
          align-items: center;
        }
        .left-circle,
        .right-circle {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
        }
        .left-circle {
          background-color: #409eff;
        }
        .right-circle {
          background-color: #ebeef5;
        }
      }
    }
    // &:last-child {

    // }
  }
  .item2 {
    height: 18px;
    line-height: 18px;
    &:last-child {
      margin-top: 22px;
      height: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .box-card {
    // width: 480px;
    min-height: 160px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-button {
        padding: 0;
        padding-bottom: 22px;
      }
      .card-title {
        display: flex;
        justify-content: center;
        .cards-text {
          .title {
            line-height: 24px;
            font-size: 14px;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .words {
            font-size: 12px;
            color: #797979;
          }
        }
      }
    }
  }
}

.bars {
  margin: 20px 0;
}

.search {
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .grid-content2 {
    border-radius: 4px;
    min-height: 36px;
    display: flex;
    justify-content: center;
    .open {
      display: flex;
      align-items: center;
    }
    .words {
      font-size: 14px;
      line-height: 40px;
    }
  }
  .top-search {
    position: relative;
    text-align: center;
    line-height: 36px;
    input::-webkit-input-placeholder {
      color: #aab2bd; /* placeholder颜色  */
      font-size: 12px; /* placeholder字体大小  */
      // text-align: right; /* placeholder位置  */
    }
    .top-input {
      height: 34px;
      width: 100%;
      border-radius: 20px;
      border: 1px solid #aab2bd;
      padding-left: 30px;
    }
    .input-icon {
      position: absolute;
      top: 10%;
      line-height: 34px;
      left: 4%;
    }
  }
}

//
.tables {
  margin-top: 20px;
}
.table-footer {
  display: flex;
  justify-content: space-between;
  .words {
    line-height: 20px;
    color: #797979;
  }
}
</style>
